<template>
  <div class="home-menu">
    <el-menu
      router
      :default-active="$route.name"
      text-color="#fff"
      active-text-color="#409eff"
      background-color="#222832"
    >
      <el-menu-item
        v-for="item in menuList.first"
        :key="item.name"
        :index="item.name"
      >
        <i :class="[item.meta.icon]"></i>
        <span slot="title">{{ item.meta.title }}</span>
      </el-menu-item>

      <el-submenu index="submenu">
        <template #title>
          <i class="el-icon-s-tools"></i>
          <span>主页配置</span>
        </template>
        <el-menu-item
          v-for="item in menuList.second"
          :key="item.name"
          :index="item.name"
        >
          <i :class="[item.meta.icon]"></i>
          <span slot="title">{{ item.meta.title }}</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "home-menu",
  computed: {
    // 依赖于路由表，筛选出MENU动态绑定的数据
    menuList() {
      let first = [],
        second = [],
        routes = this.$router.getRoutes();
      routes = routes.filter((route) => route.meta.level === 2);
      routes.forEach((route) => {
        if (route.meta.submenu) {
          second.push(route);
          return;
        }
        first.push(route);
      });
      return {
        first,
        second,
      };
    },
  },
};
</script>

<style lang="less" scoped>
.el-menu {
  border-right: none;
}
</style>